<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="resources/images/favicon.ico" rel="shortcut icon" type="text/css">
    <link href="resources/images/favicon.ico" rel="shortcut icon" type="text/css">
    <link rel="stylesheet" href="resources/css/uikit.min.css">
    <link rel="stylesheet" href="pages/resources/css/header.css">
    <link rel="stylesheet" href="pages/resources/css/common.css">
    <link rel="stylesheet" href="pages/resources/css/manage.css">
    <link rel="stylesheet" href="pages/resources/css/music.css">

    <title>Orange管理后台</title>
</head>
<body>
<div class="uk-grid">
    <div class="uk-width-1-1">
        <div class="topHeader">
            <header>
                <a href="#" class="header-brand">Orange</a>
                <ul class="header-nav" id="headerNav">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="aticle.html">文章</a></li>
                    <li><a href="picture.html">图片</a></li>
                    <li class="link_active"><a href="music.html">音乐</a></li>
                    <li><a href="video.html">视频</a></li>
                </ul>
                <div class="header-userinfo">
                    <img class="uk-border-circle header-usertitle"
                         src="pages/resources/images/title.jpg" alt="头像">

                    <div class="uk-button-dropdown" data-uk-dropdown>
                        <button class="uk-button header-username">${session.loginName} <i
                                class="uk-icon-caret-down"></i></button>
                        <div class="uk-dropdown uk-dropdown-center header-selectlist">
                            <ul class="uk-nav uk-nav-dropdown">
                                <li><a href="#"><i class="uk-icon-user"></i>&nbsp;&nbsp;&nbsp;&nbsp;个人中心</a></li>
                                <li><a href="#"><i class="uk-icon-tag"></i>&nbsp;&nbsp;&nbsp;&nbsp;通知消息</a></li>
                                <li><a href="#"><i class="uk-icon-cog"></i>&nbsp;&nbsp;&nbsp;&nbsp;系统设定</a></li>
                                <li><a href="#"><i class="uk-icon-power-off"></i>&nbsp;&nbsp;&nbsp;&nbsp;退出系统</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </header>
        </div>
    </div>
</div>
<div class="uk-grid colin-main-frame">
    <div class="uk-width-1-6 colin-left-nav">
        <img class="uk-border-circle colin-headerpic"
             src="pages/resources/images/title.jpg" alt="头像">
        <ul>
            <li><i class="uk-icon-folder-o"></i>

                <p>901</p>

                <p class="colin-collectInfo">+901</p></li>
            <li><i class="uk-icon-envelope-o"></i>

                <p>901</p>

                <p class="colin-collectInfo">+901</p></li>
            <li><i class="uk-icon-eye"></i>

                <p>901</p>

                <p class="colin-collectInfo">+901</p></li>
        </ul>
        <button id="logoffBtn" onclick="logOffSystem()" class="uk-button uk-button-danger colin-logoff-btn"
                type="button"><i class="uk-icon-sign-out"></i>&nbsp;&nbsp;退出登录
        </button>
        <table id="functionNav" class="colin-function-nav">
            <tbody>
            <tr>
                <td>
                    <i class="uk-icon-home"></i>

                    <p>博客首页</p>
                </td>
                <td>
                    <i class="uk-icon-bar-chart"></i>

                    <p>统计信息</p></td>
            </tr>
            <tr>
                <td>
                    <i class="uk-icon-group"></i>

                    <p>用户管理</p></td>
                <td>
                    <i class="uk-icon-user"></i>

                    <p>博主信息</p></td>
            </tr>
            <tr>
                <td>
                    <i class="uk-icon-trash-o"></i>

                    <p>回收站</p></td>
                <td>
                    http://music.baidu.com/ <i class="uk-icon-wrench"></i>

                    <p>系统管理</p></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="uk-width-5-6 colin-right-model">
        <div class="aticleMainContet">

            <ul id="switch-tab" class="uk-tab tab-nav colin-nav-banner"
                data-uk-tab="{connect:'#music-manage-tab',animation: 'slide-vertical'}">
                <li><a class="tabStyle" href="#">音乐首页</a></li>
                <li><a class="tabStyle" href="#">收藏音乐</a></li>
                <li><a class="tabStyle" href="#">音乐一览</a></li>
                <li><a class="tabStyle" href="#">音乐评论</a></li>
            </ul>
            <ul id="music-manage-tab" class="uk-switcher uk-margin">
                <!--music index-->
                <li>
                    <iframe id="baidu_music_index" class="uk-width-1-1" src="http://music.baidu.com/"></iframe>
                </li>
                <!--collect music-->
                <li>
                    <form class="uk-form uk-form-horizontal uk-width-1-1">

                        <div class="uk-form-row">
                            <label class="uk-form-label" for="form-h-it">歌曲名称</label>

                            <div class="uk-form-controls">
                                <input type="text" class="uk-width-4-6" id="form-h-it" name="music_name" placeholder="请输入歌曲名称">
                            </div>
                        </div>
                        <div class="uk-form-row">
                            <label class="uk-form-label" for="form-h-ip">演唱者</label>

                            <div class="uk-form-controls">
                                <input type="text"  class="uk-width-4-6" id="form-h-ip" name="music_author" placeholder="输入演唱者">
                            </div>
                        </div>
                        <div class="uk-form-row">
                            <label class="uk-form-label" for="form-h-ip">歌曲链接</label>

                            <div class="uk-form-controls">
                                <input type="text"  class="uk-width-4-6" id="form-h-ip" name="music_link" placeholder="输入歌曲链接">
                            </div>
                        </div>
                        <div class="uk-form-row">
                            <label class="uk-form-label" for="form-h-s">音乐分类</label>

                            <div class="uk-form-controls">
                                <select  class="uk-width-4-6" name="music_category" id="form-h-s">
                                    <option value="0">民谣</option>
                                    <option value="1">流行</option>
                                    <option value="2">R&B</option>
                                    <option value="3">Rap</option>
                                    <option value="4">爵士</option>
                                    <option value="5">摇滚</option>
                                    <option value="6">轻音乐</option>
                                </select>
                            </div>
                        </div>
                        <div class="uk-form-row">
                            <label class="uk-form-label" for="form-h-t">歌曲简介</label>

                            <div class="uk-form-controls">
                                <textarea  class="uk-width-4-6" id="form-h-t" cols="30" rows="5" name="music_describe"
                                          placeholder="请输入歌曲简介"></textarea>
                            </div>
                        </div>
                        <div class="uk-form-row">
                            <div class="uk-form-controls uk-form-controls-text">
                                <button type="submit" class="uk-button uk-button-primary">提交</button>
                                <button type="reset" class="uk-button uk-button-danger">重置内容</button>
                            </div>
                        </div>
                    </form>
                </li>
                <!--music show-->
                <li>
                    <table>
                        <thead>
                        <tr>
                            <th>歌曲名称</th>
                            <th>歌曲演唱者</th>
                            <th>播放次数</th>
                            <th>歌曲分类</th>
                            <th>录入时间</th>
                            <th>歌曲操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        </tbody>

                    </table>
                </li>
                <!--Music Comment-->
                <li>
                    <ul>
                        <li></li>
                    </ul>
                    <div id="player-demo">
                        <div class="player-widget">
                            <div class="opts">
                    <span class="prev">
                        <i class="glyphicon glyphicon-step-backward"></i>
                    </span>
                    <span class="ctrl">
                        <i class="glyphicon glyphicon-play"></i>
                    </span>
                    <span class="next">
                        <i class="glyphicon glyphicon-step-forward"></i>
                    </span>
                                <span class="mode"><i class="glyphicon glyphicon-repeat"></i></span>
                            </div>
                            <div class="volume">
                                <i class="glyphicon glyphicon-volume-down"></i><span class="bar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 80%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 80%;"></a></span>
                            </div>
                            <a class="avatar" href="javascript:;">
                                <img alt="" src="img/default.jpg">
                            </a>
                            <div class="progress-bar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all ui-slider-disabled ui-state-disabled" aria-disabled="true"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--开始加载js-->
<script type="text/javascript" src="resources/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="resources/js/modernizr.custom.js"></script>
<script type="text/javascript" src="resources/js/uikit.min.js"></script>
<script type="text/javascript" src="resources/js/components/autocomplete.min.js"></script>
<script type="text/javascript" src="resources/js/components/datepicker.min.js"></script>
<script type="text/javascript" src="resources/js/components/form-password.min.js"></script>
<script type="text/javascript" src="resources/js/components/notify.min.js"></script>
<script type="text/javascript" src="resources/js/components/search.min.js"></script>
<script type="text/javascript" src="resources/js/components/sortable.min.js"></script>
<script type="text/javascript" src="resources/js/components/sticky.min.js"></script>
<script type="text/javascript" src="resources/js/components/upload.min.js"></script>
<script type="text/javascript" src="resources/js/components/pagination.min.js"></script>
<script type="text/javascript" src="resources/js/components/form-select.min.js"></script>
<script type="text/javascript" src="resources/js/components/nestable.min.js"></script>
<script type="text/javascript" src="resources/js/components/slideshow.min.js"></script>
<script type="text/javascript" src="resources/muplayer/dist/player.min.js"></script>
<script type="text/javascript" src="pages/resources/js/common.js"></script>
<script type="text/javascript" src="pages/resources/js/music.js"></script>

</body>
</html>